<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
      </div>
      <el-button
        class="filter-item"
        size="mini"
        type="warning"
        icon="el-icon-download"
        @click="doExport()"
      >导出</el-button>
      <!--表单组件  -->
      <el-card class="box-card" style="margin-top: 10px;">
        <div slot="header" class="clearfix">
          <span>发卡详情</span>
          <!-- 订单状态:0新增 0校园领用-->
          <!-- <template v-if="param.orderStatus==='0' && param.orderType==='0'">
            <div style="float: right; padding: 3px 0px">
              <el-button type="warning" :loading="cancelLoading" @click="shipments(0)">取消订单</el-button>
              <el-button type="primary" :loading="submitLoading" @click="shipments(1)">确认发货</el-button>
            </div>
          </template> -->
          <!-- 订单状态:1已付款  订单类型:1在线支付 -->
          <template v-if="param.orderStatus==='0' && param.orderType==='0' ||param.orderStatus==='1' && param.orderType==='1'">
            <div v-permission="['admin','cardReceive:shipments']" style="float: right; padding: 3px 0px">
              <el-button type="primary" @click="shipments(1)">确认发货</el-button>
            </div>
          </template>
        </div>
        <el-form ref="param" :inline="true" :model="param" :rules="rules" label="left" label-width="120px">
          <el-form-item label="订单编号">
            <el-input v-model="param.orderNo" style="width: 184px;" disabled />
          </el-form-item>
          <el-form-item label="学习卡类型">
            <el-select v-model="param.cardType" filterable disabled style="width: 184px;">
              <el-option
                v-for="item in dict.card_type"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <!-- <el-input v-model="param.cardType" disabled /> -->
          </el-form-item>
          <el-form-item label="学习卡单价(元)">
            <el-input v-model="cardAmount" disabled style="width: 184px;" />
          </el-form-item>
          <el-form-item label="学习卡数量(张)">
            <el-input v-model="param.cardCount" disabled style="width: 184px;" />
          </el-form-item>
          <el-form-item label="付款总金额(元)">
            <el-input v-model="totalAmount" disabled style="width: 184px;" />
          </el-form-item>
          <el-form-item label="收货人姓名">
            <el-input v-model="param.receiveName" disabled style="width: 184px;" />
          </el-form-item>
          <el-form-item label="收货人电话">
            <el-input v-model="param.receivePhone" disabled style="width: 184px;" />
          </el-form-item>
          <el-form-item label="收货人地址">
            <el-input v-model="param.receiveAddress" disabled style="width: 184px;" />
          </el-form-item>
          <el-form-item label="订单状态">
            <!-- <el-input v-model="param.orderStatus" disabled /> -->
            <el-select v-model="param.orderStatus" filterable disabled style="width: 184px;">
              <el-option
                v-for="item in dict.order_status"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="物流公司" prop="logisticsName">
            <el-select
              v-model="param.logisticsName"
              :disabled="param.orderStatus==='0'&&param.orderType==='0'
                ||param.orderStatus==='1' && param.orderType==='1'?false:true"
              filterable
              placeholder="请选择"
              style="width: 184px;"
            >
              <el-option
                v-for="item in dict.logistics_name"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="物流单号" prop="logisticsNum">
            <el-input
              v-model="param.logisticsNum"
              style="width: 184px;"
              :disabled="param.orderStatus==='0'&& param.orderType==='0'
                ||param.orderStatus==='1' && param.orderType==='1'?false:true"
            />
          </el-form-item>
        </el-form>
      </el-card>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="cardId" label="编号" />
        <el-table-column prop="cardType" label="学习卡类型" align="center">
          <template slot-scope="scope">
            {{ dict.label.card_type[scope.row.cardType] }}
          </template>
        </el-table-column>
        <el-table-column prop="cardNo" label="卡号" align="center" />
        <el-table-column prop="cardAmount" label="面值(元)" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.cardAmount /100 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="validTime" label="卡有效期" align="center" />

      </el-table>

      <!--分页组件-->
      <pagination />
    </div>
    <!--    <div slot="footer" class="dialog-footer">-->
    <!--      <el-button type="text" @click="crud.cancelCU">取消</el-button>-->
    <!--      <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>-->
    <!--    </div>-->
  </div>
</template>

<script>
import crudCardRefill from '@/api/cardRefill'
import CRUD, { presenter, header, crud } from '@crud/crud'
import pagination from '@crud/Pagination'
import { download } from '@/api/data'
import { downloadFile } from '@/utils/index'
import crudOrder from '@/api/card/order'

export default {
  name: 'CardRefill',
  components: { pagination },
  mixins: [presenter(), header(), crud()],
  dicts: ['order_type', 'card_type', 'logistics_name', 'order_status'],
  cruds() {
    return CRUD({ title: '学习卡', url: 'api/cardRefill', idField: 'cardId', sort: 'cardId,desc', crudMethod: { ...crudCardRefill },
      optShow: {
        add: false,
        del: false,
        reset: false,
        edit: false,
        download: true
      }
    })
  },
  data() {
    return {
      submitLoading: false,
      cancelLoading: false,
      rules: {
        logisticsName: [
          { required: true, message: '请选择物流公司', trigger: 'blur' }
        ],
        logisticsNum: [
          { required: true, message: '请输入物流账号', trigger: 'blur' }
        ]
      },
      queryTypeOptions: [
        { key: 'cardNo', display_name: '卡号' },
        { key: 'cardStatus', display_name: '学习卡状态' },
        { key: 'customerPhone', display_name: '客户电话' }
      ],
      param: {
        orderNo: null,
        cardType: null,
        cardAmount: null,
        cardCount: null,
        totalAmount: null,
        orderType: null,
        receiveName: null,
        receivePhone: null,
        receiveAddress: null,
        orderStatus: null,
        logisticsName: null,
        logisticsNum: null
      }
    }
  },
  computed: {
    cardAmount() {
      return this.param.cardAmount / 100
    },
    totalAmount() {
      return this.param.totalAmount / 100
    }
  },
  created() {
    // // 获取用户信息
    // this.user = this.$store.getters.user
    // alert(this.$route.query.paicheNo)
    this.param.orderNo = this.$route.query.orderNo
    this.param.cardType = this.$route.query.cardType
    this.param.cardAmount = this.$route.query.cardAmount
    this.param.cardCount = this.$route.query.cardCount
    this.param.totalAmount = this.$route.query.totalAmount
    this.param.orderType = this.$route.query.orderType.toString()
    this.param.receiveName = this.$route.query.receiveName
    this.param.receivePhone = this.$route.query.receivePhone
    this.param.receiveAddress = this.$route.query.receiveAddress
    this.param.orderStatus = this.$route.query.orderStatus.toString()
    this.param.logisticsName = this.$route.query.logisticsName
    this.param.logisticsNum = this.$route.query.logisticsNum
    // this.crud.query.orderId = this.$route.query.orderNo
    // this.crud.params.orderId = this.$route.query.orderNo
    // this.crud.query.cardNo = this.$route.query.orderNo
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh](a, b) {
      console.log('=====', this.crud)
      // alert(this.$route.query.orderNo)
      this.crud.query.orderId = this.$route.query.orderNo
      return true
    },
    [CRUD.HOOK.beforeToEdit](a, b) {
      // alert('' + this.dict.label.card_status[this.form.cardStatus])
      // alert(this.form.cardStatus)
      this.form.cardStatus = this.form.cardStatus + ''
      // alert(b.cardStatus)
      // this.$forceUpdate()
      // alert(b.cardType)
      b.cardAmount = b.cardAmount / 100
      return true
    },
    shipments(index) {
      const user = this.$store.getters.user
      this.param.buyId = user.id
      this.param.buyName = user.username
      this.param.buyPhone = user.phone
      if (index === 1) {
        this.shipmentOrder(this.param)
      } else {
        this.cancelOrder(this.param)
      }
    },
    shipmentOrder(params) {
      this.submitLoading = true
      this.$refs.param.validate((valid) => {
        if (valid) {
          crudOrder.shipments(params).then(res => {
            this.submitLoading = false
            this.$alert('发货成功', '提示', {
              confirmButtonText: '确定',
              callback: action => {
                this.$router.go(-1)
              }
            })
          })
        } else {
          this.submitLoading = false
          console.log('error submit!!')
          return false
        }
      })
    },
    cancelOrder(params) {
      this.cancelLoading = true
      crudOrder.cancel(params).then(res => {
        this.cancelLoading = false
        this.$alert('取消订单成功', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.$router.go(-1)
          }
        })
      })
    },
    doExport() {
      const params = {
        'orderNo': this.param.orderNo
      }
      download('/api/order/download/detail', params).then(result => {
        downloadFile(result, '发卡详情' + '数据', 'xlsx')
      }).catch(() => {

      })
    }
  }
}
</script>
